import {
  Stack,
  Image,
  useTheme,
  ImageFit,
  DefaultButton,
  IButtonStyles,
} from "@fluentui/react";
import { Nav2 } from "../components/nav2";
import Cardlist from "../components/cardlist";
import React, { useEffect } from "react";
import { InS, Iroot } from "../interface";

type P = Iroot & InS;

const stylesbutton: IButtonStyles = {
  root: {
    backgroundColor: "#434343",
    color: "#fff",
    borderColor: "#434343",
  },
  rootHovered: {
    backgroundColor: "#FF8461",
    color: "#fff",
    borderColor: "#FF8461",
  },
};

function Home(p: P) {
  const theme = useTheme()
  const [selectedKey, setSelectedKey] = React.useState<
    "all" | number | undefined
  >("all");
  const [path, setpath] = React.useState<string>("/");
  const [tableDa, setTableDate] = React.useState(tableDate2());
  React.useEffect(() => {
    setTableDate(tableDate2());
  }, [p.getCatebag, p.getCoursecatebag, p.getuserCourse]);
  useEffect(() => {
    setTableDate(tableDate2());
  }, [selectedKey]);
  function tableDate2() {
    const {
      getCatebag,
      getCoursecatebag,
      getuserCourse,
      getCatebagtype,
      getCourse,
    } = p;
    let typeid: any = "";
    if (selectedKey !== "all") {
      const n = getCatebagtype.find((v) => v.ID === selectedKey);
      if (n) typeid = n.ID;
    }
    const data = getCatebag
      .map((v) => {
        const n = getCoursecatebag
          .filter((d) => {
            if (typeid) {
              return d.catebagid === v.ID && typeid === v.typeid;
            }
            return d.catebagid === v.ID;
          })
          .map((f) => f.cid);
        return {
          ...v,
          title: v.name,
          path,
          length: n.length,
          list: getuserCourse.filter((s) => n.includes(s.ID)),
        };
      })
      .filter((f) => f.list.length)
      .sort((a, b) => Number(a.paixu) - Number(b.paixu));
    return data;
  }

  return (
    <Stack theme={theme}>
      <Image
        src="https://cdn.hterobot.com/JOY/CloudClassroom/Banner_myclass.png"
        width="100%"
        height={240}
        imageFit={ImageFit.centerCover}
      />
      <Nav2
        selectedKey={selectedKey}
        setSelectedKey={setSelectedKey}
        {...p}
      ></Nav2>
      <Stack style={{ marginTop: 24 }}>
        <div className="container-xxl">
          <div className="row">
            {tableDa.map((e, k) => {
              return (
                <Stack
                  key={k}
                  style={{
                    height: 158,
                    marginBottom: "calc(var(--bs-gutter-x))",
                  }}
                  className="col-6"
                >
                  <Cardlist data={e} {...p}></Cardlist>
                </Stack>
              );
            })}
          </div>
          {tableDa.length === 0 ? (
            <div className="row text-center">
              <strong>您目前没有课程，可跳转题库练习</strong> <br />
              {/* <a href="https://oj.hterobot.com">
                <DefaultButton className="transition" styles={stylesbutton}>
                  题库
                </DefaultButton>
              </a> */}
            </div>
          ) : (
            <></>
          )}
        </div>
      </Stack>
    </Stack>
  );
}

export default Home;
